<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
    
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    
            http://www.apache.org/licenses/LICENSE-2.0
    
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="sc">
  <div class="sc__zone">
    <h3>Button</h3>

    <mat-card style="display: flex; justify-content: space-around">
      <button mat-button>Basic</button> <button mat-raised-button color="primary">Primary</button>
      <button mat-raised-button color="accent">Accent</button>
      <button mat-raised-button color="warn">Warn</button>
      <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-card>
  </div>

  <div class="sc__zone">
    <h3>Toolbar</h3>
    <p>
      <mat-toolbar>
        <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
          <mat-icon>menu</mat-icon>
        </button>
        <span>My App</span>
        <span class="example-spacer"></span>
        <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
        <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
          <mat-icon>share</mat-icon>
        </button>
      </mat-toolbar>
    </p>

    <p>
      <mat-toolbar color="primary">
        <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
          <mat-icon>menu</mat-icon>
        </button>
        <span>My App</span>
        <span class="example-spacer"></span>
        <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
          <mat-icon>favorite</mat-icon>
        </button>
        <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
          <mat-icon>share</mat-icon>
        </button>
      </mat-toolbar>
    </p>
  </div>

  <div class="sc__zone">
    <h3>Card</h3>
    <mat-card>
      <mat-card-header>
        <div
          mat-card-avatar
          style="background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); background-size: cover"
        ></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu" />
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very
          well with mountainous terrain, the Shiba Inu was originally bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div class="sc__zone">
    <h3>Form field</h3>
    <mat-card>
      <p>
        <mat-form-field appearance="legacy">
          <mat-label>Legacy form field</mat-label>
          <input matInput placeholder="Placeholder" />
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
          <mat-hint>Hint</mat-hint>
        </mat-form-field>
      </p>
      <p>
        <mat-form-field appearance="standard">
          <mat-label>Standard form field</mat-label>
          <input matInput placeholder="Placeholder" />
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
          <mat-hint>Hint</mat-hint>
        </mat-form-field>
      </p>
      <p>
        <mat-form-field appearance="fill">
          <mat-label>Fill form field</mat-label>
          <input matInput placeholder="Placeholder" />
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
          <mat-hint>Hint</mat-hint>
        </mat-form-field>
      </p>
      <p>
        <mat-form-field appearance="outline">
          <mat-label>Outline form field</mat-label>
          <input matInput placeholder="Placeholder" />
          <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
          <mat-hint>Hint</mat-hint>
        </mat-form-field>
      </p>
      <p>
        <gio-form-slide-toggle>
          <gio-form-label>Label 1</gio-form-label>
          Label 2 - Description
          <mat-slide-toggle gioFormSlideToggle></mat-slide-toggle>
        </gio-form-slide-toggle>
      </p>
    </mat-card>
  </div>

  <div class="sc__zone">
    <h3>Checkbox / Radio</h3>
    <mat-card>
      <section>
        <mat-checkbox style="display: block">Check me!</mat-checkbox>
        <mat-checkbox style="display: block" [disabled]="true">Disabled</mat-checkbox>
        <mat-checkbox style="display: block" color="primary" [checked]="true">Check me!</mat-checkbox>
        <mat-checkbox style="display: block" color="accent" [checked]="true">Check me!</mat-checkbox>
        <mat-checkbox style="display: block" color="warn" [checked]="true">Check me!</mat-checkbox>
      </section>
      <section>
        <mat-radio-group aria-label="Select an option">
          <mat-radio-button value="1">Option 1</mat-radio-button>
          <mat-radio-button value="2">Option 2</mat-radio-button>
        </mat-radio-group>
      </section>
    </mat-card>
  </div>

  <div class="sc__zone">
    <h3>Chips</h3>

    <mat-chip-list aria-label="Fish selection">
      <mat-chip>One fish</mat-chip>
      <mat-chip>Two fish</mat-chip>
      <mat-chip color="primary" selected>Primary fish</mat-chip>
      <mat-chip color="accent" selected>Accent fish</mat-chip>
    </mat-chip-list>
  </div>

  <div class="sc__zone">
    <h3>Progress bar</h3>
    <mat-progress-bar style="margin: 10px" mode="buffer"></mat-progress-bar>
    <mat-progress-bar style="margin: 10px" mode="indeterminate"></mat-progress-bar>
    <mat-progress-bar style="margin: 10px" color="accent" mode="buffer" value="33" bufferValue="75"></mat-progress-bar>
  </div>

  <div class="sc__zone">
    <h3>Stepper</h3>

    <mat-stepper [linear]="false" #stepper>
      <mat-step>
        <form>
          <ng-template matStepLabel>Fill out your name</ng-template>
          <mat-form-field appearance="fill">
            <mat-label>Name</mat-label>
            <input matInput placeholder="Last name, First name" required />
          </mat-form-field>
          <div>
            <button mat-button matStepperNext>Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step label="Fill out your address">
        <form>
          <mat-form-field appearance="fill">
            <mat-label>Address</mat-label>
            <input matInput placeholder="Ex. 1 Main St, New York, NY" required />
          </mat-form-field>
          <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        <p>You are now done.</p>
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button>Reset</button>
        </div>
      </mat-step>
    </mat-stepper>
  </div>

  <div class="sc__zone">
    <h3>Tooltip</h3>

    <button mat-raised-button matTooltip="Info about the action" aria-label="Button that displays a tooltip when focused or hovered over">
      Action
    </button>
  </div>

  <div class="sc__zone">
    <h3>Table + Paginator</h3>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" style="width: 100%">
      <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

      <!-- Position Column -->
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef>No.</th>
        <td mat-cell *matCellDef="let element">{{ element.position }}</td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
      </ng-container>

      <!-- Weight Column -->
      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef>Weight</th>
        <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
      </ng-container>

      <!-- Symbol Column -->
      <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef>Symbol</th>
        <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>

    <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page"> </mat-paginator>
  </div>
</div>
